<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="xbgf pr xflex-x-around">
					<!-- <u-tabs :scrollable="false" :current='current' :list="list" @click="click"></u-tabs> -->
					<view class="tabs" :class="tabsindex == index?'active':''" @click="ontab(index)"
						v-for="(item,index) in list" :key="index">
						{{item.name}}
					</view>
					<view class="pa tabs-span" :style="leftsp">

					</view>
				</view>
			</template>

			<view class="yhq">

				<view v-for="(item,index) in dataList" :key="index">

					<template v-if="tabsindex == 0">
						<view class="yhq-item pr">
							<image class="yhq-bg" src="/static/image/mine/yhq.png" mode=""></image>
							<view class="yhq-box pa xflex-x-between">
								<view class="xflex-y-center xai">
									<view class="yhq-title">
										{{item.name || ''}}
									</view>
									<view class="yhq-time">
										{{item.time || ''}}
									</view>
									<view class="yhq-tj" v-if="item.method == 1">
										满￥{{item.need || ''}}使用
									</view>
									<view class="yhq-time" v-else>
										使用规则：{{item.type == 0 ? '全平台酒店通用' :'部分酒店通用'}}
									</view>
								</view>
								<view class="xflex-y-center">
									<view class="yhq-price xcf">
										<text>￥</text>{{item.money || ''}}
									</view>
									<view class="yhq-tj" v-if="item.method == 1">
										满￥{{item.need || ''}}使用
									</view>
									<view class="yhq-btn">
										立即使用
									</view>
								</view>
							</view>
						</view>


					</template>

					<template v-if="tabsindex == 1">
						<view class="yhq-item pr">
							<image class="yhq-bg" src="/static/image/mine/yyyhq.png" mode=""></image>
							<image class="yhq-ysy pa" src="/static/image/mine/ysy.png" mode=""></image>
							<view class="yhq-box pa xflex-x-between">
								<view class="xflex-y-center xai">
									<view class="yhq-title">
										{{item.name || ''}}
									</view>
									<view class="yhq-time">
										{{item.time || ''}}
									</view>

									<view class="yhq-time">
										使用规则：{{item.type == 0 ? '全平台酒店通用' :'部分酒店通用'}}
									</view>
								</view>
								<view class="xflex-y-center">
									<view class="yhq-price xcf">
										<text>￥</text>{{item.money || ''}}
									</view>
									<view class="yhq-tj" v-if="item.method == 1">
										满￥{{item.need || ''}}使用
									</view>

								</view>
							</view>
						</view>

					</template>

					<template v-if="tabsindex == 2">
						<view class="yhq-item pr">
							<image class="yhq-bg" src="/static/image/mine/yyyhq.png" mode=""></image>
							<image class="yhq-ysy pa" src="/static/image/mine/ygq.png" mode=""></image>
							<view class="yhq-box pa xflex-x-between">
								<view class="xflex-y-center xai">
									<view class="yhq-title">
										{{item.name || ''}}
									</view>
									<view class="yhq-time">
										{{item.time || ''}}
									</view>
									<view class="yhq-time">
										使用规则：全平台商品通用
									</view>
								</view>
								<view class="xflex-y-center">
									<view class="yhq-price xcf">
										<text>￥</text>{{item.money || ''}}
									</view>
									<view class="yhq-tj" v-if="item.method == 1">
										满￥{{item.need || ''}}使用
									</view>
								</view>
							</view>
						</view>

					</template>

				</view>


			</view>

		</z-paging>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		couponList
	} from '/network/home.js'
	let list = ref([{
		name: '待使用'
	}, {
		name: '已使用'
	}, {
		name: '已过期'
	}])

	const paging = ref(null)
	const dataList = ref([])

	let current = ref(0)

	const click = (e) => {
		console.log(e);
		current.value = e.index
		paging.value.reload()
	}

	let tabsindex = ref(0)

	let leftsp = computed(() => ({

		left: tabsindex.value == 0 ? '14%' : tabsindex.value == 1 ? '46.5%' : '80%'

	}))
	
	const ontab = (index) =>{
		tabsindex.value = index
		paging.value.reload()
	}

	const queryList = (pageNo, pageSize) => {
		couponList({
			page_no: pageNo,
			page_size: pageSize,
			type: tabsindex.value
		}).then(res => {
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	.tabs {
		padding: 30rpx 0 20rpx 0;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #999999;

		&-span {
			width: 60rpx;
			height: 8rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			bottom: 0;
			transition: transform 0.5s ease-out;
		}
	}

	.active {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #222222;
	}

	.yhq {
		margin: auto;

		&-item {
			width: 706rpx;
			height: 220rpx;
			margin: auto;
			margin-bottom: 24rpx;
		}

		&-bg {
			width: 100%;
			height: 100%;
		}

		&-box {
			// inset: 0;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			padding: 0 10rpx 0 37rpx;
			box-sizing: border-box;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
		}

		&-time {
			font-weight: 500;
			font-size: 22rpx;
			color: #222222;
			margin-top: 26rpx;
		}

		&-btn {
			width: 128rpx;
			height: 42rpx;
			background: #FFFFFF;
			border-radius: 21rpx;

			font-weight: 500;
			font-size: 20rpx;
			color: #FF4855;
			text-align: center;
			line-height: 42rpx;
			margin-top: 50rpx;
		}

		&-tj {
			font-weight: bold;
			font-size: 22rpx;
			color: #FFFFFF;
		}

		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 60rpx;
			color: #FFFFFF;

			&>text {
				font-size: 44rpx;
			}
		}

		&-ysy {
			right: 230rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 141rpx;
			height: 141rpx;
		}
	}
</style>